/*
* @Author: Josh
* @Date:   2019-08-17 16:47:41
* @Last Modified by:   Administrator
* @Last Modified time: 2019-08-17 17:20:10
*/

/*
*    使用说明
*    为了实现该提示工具出场动画，改属性diaplay为属性opacity
*    使用步骤：
*    1、使用js动态添加组件到DOM树中（body节点下）
*    2、添加 ‘show’这个class以显示组件
*    3、当需取消该组件时，取除‘show’这个class，并在动画结束后移除改节点
*/

/* toash 提示工具 */
.ju-toast {
    position     : fixed;
    width        : 7rem;
    top          : 45%;
    transform    : translateY(-40%);
    right        : 0;
    left         : 0;
    margin       : auto;
    padding      : 1rem 0;
    opacity      : 0; /*透明级别：完全透明*/
    color        : #fff;
    text-align   : center;
    background   : rgba(0,0,0,.6);
    border-radius: .4rem;
    transition   : transform .3s, opacity .3s;
    z-index      : 301;
}
/* 显示Toash组件 */
.ju-toast.show {
    opacity  : 1;
    transform: translateY(-50%);
}
/* Tosh组件图标 */
.ju-toast > .ju-toast-icon {
    font-size: 2.2rem;
}
/* Tosh组件文本 */
.ju-toast > .ju-toast-info {
    margin-top: .5rem;
    font-size : .7rem;
}